@model PocketPals.Models.Transaction

@{
    ViewData["Title"] = "交易详情";
}

<div class="container mt-4">
    <div class="row justify-content-center"> @* Added row and centering *@
        <div class="col-md-8 col-lg-6"> @* Added column with width constraints *@
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        @if (Model.Type == TransactionType.Income)
                        {
                            <span class="badge bg-success me-2"><i class="fas fa-arrow-up me-1"></i>收入</span>
                        }
                        else
                        {
                            <span class="badge bg-danger me-2"><i class="fas fa-arrow-down me-1"></i>支出</span>
                        }
                    </h5>
                    <span class="text-muted"><i class="far fa-calendar-alt me-1"></i>@Model.TransactionTime.ToString("yyyy-MM-dd HH:mm")</span>
                </div>
                <div class="card-body p-4">
                    <dl class="row mb-0">
                        <dt class="col-sm-3 col-md-3"><i class="fas fa-dollar-sign me-1"></i>金额</dt> @* Adjusted column for consistency within this width *@
                        <dd class="col-sm-9 col-md-9">
                            @if (Model.Type == TransactionType.Income)
                            {
                                <span class="text-success fw-bold">+@Model.Amount.ToString("N2")</span>
                            }
                            else
                            {
                                <span class="text-danger fw-bold">-@Model.Amount.ToString("N2")</span>
                            }
                        </dd>

                        <dt class="col-sm-3 col-md-3 pt-2"><i class="far fa-comment-dots me-1"></i>描述</dt> @* Adjusted column *@
                        <dd class="col-sm-9 col-md-9 pt-2">@(string.IsNullOrEmpty(Model.Description) ? "无" : Model.Description)</dd>

                        <dt class="col-sm-3 col-md-3 pt-2"><i class="fas fa-user-edit me-1"></i>操作人</dt> @* Adjusted column *@
                        <dd class="col-sm-9 col-md-9 pt-2">@Model.Operator</dd>

                        <dt class="col-sm-3 col-md-3 pt-2"><i class="far fa-clock me-1"></i>创建时间</dt> @* Adjusted column *@
                        <dd class="col-sm-9 col-md-9 pt-2">@Model.CreatedAt.ToString("yyyy-MM-dd HH:mm:ss")</dd>

                        <dt class="col-sm-3 col-md-3 pt-2"><i class="fas fa-history me-1"></i>更新时间</dt> @* Adjusted column *@
                        <dd class="col-sm-9 col-md-9 pt-2">@Model.UpdatedAt.ToString("yyyy-MM-dd HH:mm:ss")</dd>
                    </dl>
                </div>
                <div class="card-footer text-end">
                    <a asp-action="Index" class="btn btn-secondary"><i class="fas fa-arrow-left me-1"></i>返回列表</a>
                </div>
            </div>
        </div> @* End col-md-8 col-lg-6 *@
    </div> @* End row justify-content-center *@
</div>

@* Optional: Add some custom styles if needed *@
<style>
    /* Removed dl-row class references as they are not used */
    dt { /* Applied directly to dt */
        font-weight: 500;
    }
    dd { /* Applied directly to dd */
        margin-bottom: 0.5rem; /* Add some space below each item */
    }
    .card-header h5 .badge {
        font-size: 1em; /* Make badge slightly larger in header */
        vertical-align: middle;
    }
</style>